<template>
  <div>
    <el-container>
      <el-header>
        <div class="block">
          <el-avatar shape="square" :size="50" :src="Tsrc"></el-avatar> 你好,{{
            this.$store.state.writerData.writerName
          }} |  <a href="javascript:;" @click="outlogin">退出登陆</a>
        </div>
      </el-header>

      <el-container>
        <el-aside width="200px">
          <el-card class="zuo">
            <el-menu
              :default-active="activePath"
              class="el-menu-vertical-demo"
              router
            >
              <el-menu-item index="writerWork" @click="saveNav('/writerWork')">
                <i class="el-icon-s-platform"></i>
                <span slot="title">工作台</span>
              </el-menu-item>
              <el-menu-item index="writerBooks" @click="saveNav('/writerBooks')">
                <i class="el-icon-document-copy"></i>
                <span slot="title">作品管理</span>
              </el-menu-item>
              <el-menu-item index="writerMessage" @click="saveNav('/writerMessage')">
                <i class="el-icon-chat-line-round"></i>
                <span slot="title">互动管理</span>
              </el-menu-item>
              <el-menu-item index="writerData" @click="saveNav('/writerData')">
                <i class="el-icon-s-data"></i>
                <span slot="title">数据中心</span>
              </el-menu-item>
            </el-menu>
          </el-card>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  created() {
    this.activePath = window.sessionStorage.getItem("activePath");
    this.Tsrc = this.$store.state.writerData.writerAvatar;
  },
  data() {
    return {
      Tsrc: "",
      name: "",
    };
  },
  methods: {
    saveNav(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    },
    outlogin(){
      window.sessionStorage.removeItem("writerName");
      window.sessionStorage.removeItem("writerAvatar");
      window.sessionStorage.removeItem("writerToken");
      window.sessionStorage.removeItem("writerId");
      window.sessionStorage.removeItem("writerState");
      this.$router.push('/writerLogin')
    }
  },
};
</script>

<style lang="less" scoped>
.el-header {
  display: flex;
  //background-color: rgb(243, 177, 177);
  justify-content: flex-end;
  align-items: center;
  border-bottom: 1px solid rgb(206, 196, 196);
}
.el-avatar {
  margin-right: 6px;
}
.block {
  display: flex;
  height: 50px;
  align-items: center;
}
.writerCard {
  height: 700px;
  width: 700px;
}

.el-aside{
  margin-top: 70px;
  margin-left: 200px;
  height: 500px;
  /* background-color: aqua; */
}

.el-main{
  margin-left: 5px;
  margin-right: 400px;
  background-color: beige;
}
a{
  text-decoration:none;
  color: #000;
}
</style>
